<template>
    <div class="questionForm">
      <div>{{editItem.editContent}}</div>
      <el-form :model="questionModes">
        <label v-for="item in questionModes">
          <div style="text-align: left">
            {{item.modeName}}:
          </div>
          <el-button type="message" @click="prepareForEdit">添加/修改内容</el-button>
        </label>
      </el-form>
      <!-- dialog区域-->
      <el-dialog
        title="添加修改内容"
        :visible.sync="editDialog"
        width="800px"
        :before-close="handleClose">

        <div><el-button type="success" @click="edit">添加/修改</el-button></div>
      </el-dialog>
    </div>

</template>

<script>

  import VueUeditorWrap from 'vue-ueditor-wrap'
  export default {
    components:{
      VueUeditorWrap
    },
    name: "QuestionForm",
    props:['questionTypeModeList'],
    data(){
      return{
        isClear: true,
        detail:"",
        editItem:{
          modeName:"",
          editContent:''
        },
        editDialog:false,
        myConfig:{
          initialFrameWidth: null,
          initialFrameHeight: 350,
          toolbars:[
            [
              'bold',//加粗
              'italic',//斜体
              'underline',//下划线
              'insertvideo',//视频上传

              'insertcode', //代码语言
            ]
          ]
        },
        questionModes:[],
      }
    },
    mounted() {

    },
    created(){
      this.questionModes=this.questionTypeModeList
      this.questionModes.some((item,i)=>{
        item.content=''
      })
    },
    methods:{
      prepareForEdit(item){
        this.editItem.modeName=item.modeName
        this.editItem.editContent=item.content
        this.editDialog=true
      },
      edit(){
        this.questionModes.some((item,i)=>{
          if(item.modeName==this.editItem.modeName){
            item.content=this.editItem.editContent
          }
        })
        this.editDialog=false
      }
    }
  }
</script>

<style scoped>
  .questionForm{
    margin: 0 auto;
    width: 900px;
  }
</style>
